<template>
  <div class="course-materials">
    <el-card>
      <div slot="header" class="clearfix">
        <span>课程资料</span>
        <el-button style="float: right;" @click="$router.back()">返回</el-button>
      </div>
      <el-table :data="materials" style="width: 100%">
        <el-table-column prop="order" label="序号" width="80" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="materialType" label="类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.materialType === 'VIDEO'" type="success">视频</el-tag>
            <el-tag v-else-if="scope.row.materialType === 'DOCUMENT'" type="info">文档</el-tag>
            <el-tag v-else-if="scope.row.materialType === 'QUIZ'" type="warning">测验</el-tag>
            <el-tag v-else>其它</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.materialType === 'VIDEO'" type="text" @click="viewVideo(scope.row)">播放</el-button>
            <el-button v-else-if="scope.row.materialType === 'DOCUMENT'" type="text" @click="viewDocument(scope.row)">查看</el-button>
            <el-button v-else-if="scope.row.materialType === 'QUIZ'" type="text" @click="goToQuiz(scope.row)">答题</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 视频弹窗 -->
    <el-dialog :visible.sync="videoDialogVisible" width="60%" :before-close="() => { videoDialogVisible = false }">
      <video v-if="currentVideoUrl" :src="currentVideoUrl" controls style="width: 100%"></video>
    </el-dialog>
    <!-- 文档弹窗 -->
    <el-dialog :visible.sync="docDialogVisible" width="60%" :before-close="() => { docDialogVisible = false }">
      <iframe v-if="currentDocUrl" :src="currentDocUrl" style="width: 100%; height: 70vh;" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'CourseMaterials',
  data() {
    return {
      materials: [],
      videoDialogVisible: false,
      currentVideoUrl: '',
      docDialogVisible: false,
      currentDocUrl: ''
    }
  },
  created() {
    this.fetchMaterials()
  },
  methods: {
    fetchMaterials() {
      const courseId = this.$route.params.courseId || this.$route.query.courseId
      if (!courseId) {
        this.$message.error('未指定课程ID')
        return
      }
      request.get(`/api/materials/course/${courseId}`)
        .then(data => {
          this.materials = data
        })
    },
    viewVideo(row) {
      this.currentVideoUrl = row.contentUrl
      this.videoDialogVisible = true
    },
    viewDocument(row) {
      this.currentDocUrl = row.contentUrl
      this.docDialogVisible = true
    },
    goToQuiz(row) {
      this.$router.push({ name: 'Quiz', params: { materialId: row.id } })
    }
  }
}
</script>

<style scoped>
.course-materials {
  max-width: 900px;
  margin: 40px auto;
}
</style> 